<template>
     <el-form :model="form" label-width="auto" style="padding: 10px;">
        <el-form-item label="数据源名称">
                  <el-input v-model="form.name" :disabled="action!='add'"/>
                </el-form-item>
        <el-form-item label="数据库类型">
          <el-select v-model="form.dbType" placeholder="请选择数据库类型">
            <el-option label="MySql" value="MYSQL" />
            <el-option label="PostgreSql" value="POSTGRESQL" />
          </el-select>
        </el-form-item>
        <el-form-item label="Schema">
          <el-input v-model="form.schema"/>
        </el-form-item>
        <el-form-item label="链接字符串">
          <el-input v-model="form.url"/>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="form.username"/>
        </el-form-item>
        <el-form-item label="密码">
           <el-input v-model="form.password" type="password" show-password/>
        </el-form-item>
          <div>dddd</div>
          <div style="text-align:center;margin: 10px auto;">
          <el-button type="primary" @click="handleTest">测试</el-button>
          <el-button type="primary" @click="handleAdd">保存</el-button>
          <el-button @click="handleCancel">取消</el-button>
          </div>
      </el-form>
</template>
<script>
    import{reactive, ref} from 'vue'
    import {add,edit,test} from '/http/datasource.js'
    const {ElMessage,ElMessageBox} = ElementPlus;
    export default {
        props:{
          initParams:Object
        },
        setup(props,context){
            const form=reactive({
              name:'',
              dbType:'',
              driver:'',
              schema:'',
              url:'',
              username:'',
              password:'',
            })


          const handleAdd = ()=>{
              if(action.value=='add'){
                add(form).then(res=> {
                  response(res,context)
                });
              }else{
                edit(form).then(res=> {
                  response(res,context)
                });
              }
          }

          const handleTest = ()=>{
              test(form).then(res=> {
                response(res)
              });
          }

          const handleCancel = ()=>{
              context.emit('close',false)
          }
          const action = ref('edit');

          onMounted(()=>{
            if(props.initParams){
              Object.assign(form,props.initParams)
              action.value= 'edit'
            }else{
              action.value= 'add'
            }
          })

          return{
            form,handleAdd,handleCancel,action,handleTest
          }
        }
    }
</script>

<style scoped>

</style>